GamePage.render - Code Metrics - Inspection of "Lil' bit of game page styling." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/game-reports ( 812aeb...4b0bd0 )

by Kevin Van

created 2021-03-12 09:56 UTC

GamePage.render D

↳ Parent: GamePage

Complexity

Conditions

Size

Total Lines	63
Code Lines	60

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	60
dl	0
loc	63
rs	4.6689
c	0
b	0
f	0
cc	12

How to fix Long Method Complexity

import React, { Component } from "react"

import { graphql } from "gatsby"

import Layout from "../layouts/index"
import SEO from "../components/seo"
import Icon from "../components/icon"

import iconBench from "../images/i_bench.png"
import iconCardRed from "../images/i_card_red.png"
import iconCardYellowRed from "../images/i_card_yellow_red.png"
import iconCardYellow from "../images/i_card_yellow.png"
import iconGoal from "../images/i_goal.png"
import iconStart from "../images/i_start.png"
import iconSubIn from "../images/i_sub_in.png"
import iconSubOut from "../images/i_sub_out.png"

class GamePage extends Component {
  constructor(props) {
    super(props)

    this.state = {
      data: [],
      loading: true,
    }

    const {
      data: {
        site: {
          siteMetadata: { kcvvPsdApi, refreshRate },
        },
      },
    } = this.props

    this.kcvvPsdApi = kcvvPsdApi
    this.apiRefreshRate = refreshRate
    this.timeout = {}
    this.matchId = this.props.id || null
  }

  updateData() {
    const apiUrl = `${this.kcvvPsdApi}/match/${this.matchId}`

    fetch(apiUrl)
      .then((response) => response.json())
      .then((json) => this.setState({ data: json, loading: false }))
  }

  componentDidMount() {
    this.updateData()
  }

  render() {
    if (this.state.loading === false && this.state.data) {
      const { general, substitutes, lineup, events } = this.state.data
      const homeTeamId = general.homeClub.id
      const awayTeamId = general.awayClub.id
      const ogImage = {
        src: general?.homeClub.logo,
        width: 180,
        height: 180,
      }

      return (
        <Layout>
          <SEO
            lang="nl-BE"
            title={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
            description={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
            path={`/game/${general?.id}`}
            image={ogImage}
          />
          <section className="grid-container site-content">
            <div className="grid-x grid-margin-x">
              <div className={"cell large-12 center"}>
                {general.date}
                <br />
                {general.status}
                <br />
                {general.homeClub.name}
                <img src={general.homeClub.logo} alt={general.homeClub.name} />
                {general.goalsHomeTeam} - {general.goalsAwayTeam}
                {general.awayClub.name}
                <img src={general.awayClub.logo} alt={general.awayClub.name} />
                <br />
                {general.competitionType}
              </div>

              <div className={"lineup__wrapper grid-x grid-margin-x cell large-12"}>
                <div className={"cell large-6 lineup__wrapper--home"}>
                  <h3>{general.homeClub.name}</h3>
                  {this.renderLineup(lineup.home, substitutes.home)}
                </div>
                <div className={"cell large-6 lineup__wrapper--away"}>
                  <h3>{general.awayClub.name}</h3>
                  {this.renderLineup(lineup.away, substitutes.away)}
                </div>
              </div>

              <div className={"cell large-12 event__wrapper"}>
                <h3>Events</h3>
                {this.renderEvents(events, homeTeamId)}
              </div>
            </div>
          </section>
        </Layout>
      )
    } else {
      return (
        <Layout>
          <section className="grid-container site-content">
            Matchverslag inladen...
          </section>
        </Layout>
      )
    }
  }

  renderEvents(events, homeTeamId) {
    return (
      <>
        {events.map((element, i) =>
          this.renderEventLine(i, element, homeTeamId)
        )}
      </>
    )
  }

  renderEventLine(i, element, homeTeamId) {
    const homeTeam = element.clubId == homeTeamId
    let actionIcon = null
    let actionText = ""

    switch (element.action) {
      case "geel":
        actionIcon = iconCardYellow
        actionText = "Gele kaart voor"
        break
      case "rood":
        actionIcon = iconCardRed
        actionText = "Rode kaart voor"
        break
      case "doelpunt":
        actionIcon = iconGoal
        actionText = `${element?.goalsHome} - ${element?.goalsAway} — Doelpunt gescoord door`
        break
    }

    return (
      <div
        className={`event__row ${
          homeTeam ? "event__row--home" : "event__row--away"
        } grid-x grid-margin-x`}
        key={i}
      >
        {homeTeam && (
          <span
            className={
              "event__row__item event__row__item--home lineup__item--name cell small-10 large-4"
            }
          >
            {actionText} {element.playerName}
          </span>
        )}
        {homeTeam && (
          <span
            className={
              "event__row__item event__row__item--home lineup__item--action cell small-1 center"
            }
            style={{ backgroundImage: `url(${actionIcon})` }}
          ></span>
        )}
        <span
          className={
            "event__row__item lineup__item--time cell small-1 large-2 center"
          }
        >
          {element.minute}'
        </span>
        {homeTeam || (
          <span
            className={
              "event__row__item event__row__item--away lineup__item--action cell small-1 center"
            }
            style={{ backgroundImage: `url(${actionIcon})` }}
          ></span>
        )}
        {homeTeam || (
          <span
            className={
              "event__row__item event__row__item--away lineup__item--name cell small-10 large-4"
            }
          >
            {actionText} {element.playerName}
          </span>
        )}
      </div>
    )
  }
  renderLineup(lineup, substitutes) {
    return (
      <>
        {this.renderLineupHeader()}
        {lineup.map((element, i) => this.renderLineupLine(i, element))}
        <hr />
        {substitutes.map((element, i) => this.renderSubLine(i, element))}
      </>
    )
  }

  renderLineupHeader() {
    return (
      <div className={"lineup__header grid-x grid-margin-x"}>
        <span
          className={"lineup__header__item lineup__item--status cell small-1"}
        ></span>
        <span
          className={"lineup__header__item lineup__item--number cell small-1"}
        >
          #
        </span>
        <span
          className={"lineup__header__item lineup__item--name cell small-9"}
        >
          Name
        </span>
        <span
          className={"lineup__header__item lineup__item--time cell small-1"}
        >
          <Icon icon="fa-clock-o" />
        </span>
      </div>
    )
  }

  renderSubLine(i, element) {
    return (
      <div
        className={"lineup__row lineup__row--substitute grid-x grid-margin-x"}
        key={i}
      >
        <span
          className={"lineup__row__item lineup__item--status cell small-1"}
          style={{
            backgroundImage: `url(${element.changed ? iconSubIn : iconBench})`,
          }}
        ></span>
        <span className={"lineup__row__item lineup__item--number cell small-1"}>
          {element.number}
        </span>
        <span className={"lineup__row__item lineup__item--name cell small-9"}>
          {element.playerName}
        </span>
        <span className={"lineup__row__item lineup__item--time cell small-1"}>
          {element.minutesPlayed}'
        </span>
      </div>
    )
  }

  renderLineupLine(i, element) {
    return (
      <div
        className={"lineup__row lineup__row--lineup grid-x grid-margin-x"}
        key={i}
      >
        <span
          className={"lineup__row__item lineup__item--status cell small-1"}
          style={{
            backgroundImage: `url(${element.changed ? iconSubOut : iconStart})`,
          }}
        ></span>
        <span className={"lineup__row__item lineup__item--number cell small-1"}>
          {element.number}
        </span>
        <span className={"lineup__row__item lineup__item--name cell small-9"}>
          {element.playerName} {element.captain && `(C)`}
        </span>
        <span className={"lineup__row__item lineup__item--time cell small-1"}>
          {element.minutesPlayed}'
        </span>
      </div>
    )
  }
}

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        siteUrl
        kcvvPsdApi
        refreshRate
      }
    }
  }
`

export default GamePage


1			import React, { Component } from "react"
2
3			import { graphql } from "gatsby"
4
5			import Layout from "../layouts/index"
6			import SEO from "../components/seo"
7			import Icon from "../components/icon"
8
9			import iconBench from "../images/i_bench.png"
10			import iconCardRed from "../images/i_card_red.png"
11			import iconCardYellowRed from "../images/i_card_yellow_red.png"
12			import iconCardYellow from "../images/i_card_yellow.png"
13			import iconGoal from "../images/i_goal.png"
14			import iconStart from "../images/i_start.png"
15			import iconSubIn from "../images/i_sub_in.png"
16			import iconSubOut from "../images/i_sub_out.png"
17
18			class GamePage extends Component {
19			constructor(props) {
20			super(props)
21
22			this.state = {
23			data: [],
24			loading: true,
25			}
26
27			const {
28			data: {
29			site: {
30			siteMetadata: { kcvvPsdApi, refreshRate },
31			},
32			},
33			} = this.props
34
35			this.kcvvPsdApi = kcvvPsdApi
36			this.apiRefreshRate = refreshRate
37			this.timeout = {}
38			this.matchId = this.props.id \|\| null
39			}
40
41			updateData() {
42			const apiUrl = `${this.kcvvPsdApi}/match/${this.matchId}`
43
44			fetch(apiUrl)
45			.then((response) => response.json())
46			.then((json) => this.setState({ data: json, loading: false }))
47			}
48
49			componentDidMount() {
50			this.updateData()
51			}
52
53			render() {
54			if (this.state.loading === false && this.state.data) {
55			const { general, substitutes, lineup, events } = this.state.data
56			const homeTeamId = general.homeClub.id
57			const awayTeamId = general.awayClub.id
58			const ogImage = {
59			src: general?.homeClub.logo,
60			width: 180,
61			height: 180,
62			}
63
64			return (
65			<Layout>
66			<SEO
67			lang="nl-BE"
68			title={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
69			description={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
70			path={`/game/${general?.id}`}
71			image={ogImage}
72			/>
73			<section className="grid-container site-content">
74			<div className="grid-x grid-margin-x">
75			<div className={"cell large-12 center"}>
76			{general.date}
77			<br />
78			{general.status}
79			<br />
80			{general.homeClub.name}
81			<img src={general.homeClub.logo} alt={general.homeClub.name} />
82			{general.goalsHomeTeam} - {general.goalsAwayTeam}
83			{general.awayClub.name}
84			<img src={general.awayClub.logo} alt={general.awayClub.name} />
85			<br />
86			{general.competitionType}
87			</div>
88
89			<div className={"lineup__wrapper grid-x grid-margin-x cell large-12"}>
90			<div className={"cell large-6 lineup__wrapper--home"}>
91			<h3>{general.homeClub.name}</h3>
92			{this.renderLineup(lineup.home, substitutes.home)}
93			</div>
94			<div className={"cell large-6 lineup__wrapper--away"}>
95			<h3>{general.awayClub.name}</h3>
96			{this.renderLineup(lineup.away, substitutes.away)}
97			</div>
98			</div>
99
100			<div className={"cell large-12 event__wrapper"}>
101			<h3>Events</h3>
102			{this.renderEvents(events, homeTeamId)}
103			</div>
104			</div>
105			</section>
106			</Layout>
107			)
108			} else {
109			return (
110			<Layout>
111			<section className="grid-container site-content">
112			Matchverslag inladen...
113			</section>
114			</Layout>
115			)
116			}
117			}
118
119			renderEvents(events, homeTeamId) {
120			return (
121			<>
122			{events.map((element, i) =>
123			this.renderEventLine(i, element, homeTeamId)
124			)}
125			</>
126			)
127			}
128
129			renderEventLine(i, element, homeTeamId) {
130			const homeTeam = element.clubId == homeTeamId
131			let actionIcon = null
132			let actionText = ""
133
134			switch (element.action) {
135			case "geel":
136			actionIcon = iconCardYellow
137			actionText = "Gele kaart voor"
138			break
139			case "rood":
140			actionIcon = iconCardRed
141			actionText = "Rode kaart voor"
142			break
143			case "doelpunt":
144			actionIcon = iconGoal
145			actionText = `${element?.goalsHome} - ${element?.goalsAway} — Doelpunt gescoord door`
146			break
147			}
148
149			return (
150			<div
151			className={`event__row ${
152			homeTeam ? "event__row--home" : "event__row--away"
153			} grid-x grid-margin-x`}
154			key={i}
155			>
156			{homeTeam && (
157			<span
158			className={
159			"event__row__item event__row__item--home lineup__item--name cell small-10 large-4"
160			}
161			>
162			{actionText} {element.playerName}
163			</span>
164			)}
165			{homeTeam && (
166			<span
167			className={
168			"event__row__item event__row__item--home lineup__item--action cell small-1 center"
169			}
170			style={{ backgroundImage: `url(${actionIcon})` }}
171			></span>
172			)}
173			<span
174			className={
175			"event__row__item lineup__item--time cell small-1 large-2 center"
176			}
177			>
178			{element.minute}'
179			</span>
180			{homeTeam \|\| (
181			<span
182			className={
183			"event__row__item event__row__item--away lineup__item--action cell small-1 center"
184			}
185			style={{ backgroundImage: `url(${actionIcon})` }}
186			></span>
187			)}
188			{homeTeam \|\| (
189			<span
190			className={
191			"event__row__item event__row__item--away lineup__item--name cell small-10 large-4"
192			}
193			>
194			{actionText} {element.playerName}
195			</span>
196			)}
197			</div>
198			)
199			}
200			renderLineup(lineup, substitutes) {
201			return (
202			<>
203			{this.renderLineupHeader()}
204			{lineup.map((element, i) => this.renderLineupLine(i, element))}
205			<hr />
206			{substitutes.map((element, i) => this.renderSubLine(i, element))}
207			</>
208			)
209			}
210
211			renderLineupHeader() {
212			return (
213			<div className={"lineup__header grid-x grid-margin-x"}>
214			<span
215			className={"lineup__header__item lineup__item--status cell small-1"}
216			></span>
217			<span
218			className={"lineup__header__item lineup__item--number cell small-1"}
219			>
220			#
221			</span>
222			<span
223			className={"lineup__header__item lineup__item--name cell small-9"}
224			>
225			Name
226			</span>
227			<span
228			className={"lineup__header__item lineup__item--time cell small-1"}
229			>
230			<Icon icon="fa-clock-o" />
231			</span>
232			</div>
233			)
234			}
235
236			renderSubLine(i, element) {
237			return (
238			<div
239			className={"lineup__row lineup__row--substitute grid-x grid-margin-x"}
240			key={i}
241			>
242			<span
243			className={"lineup__row__item lineup__item--status cell small-1"}
244			style={{
245			backgroundImage: `url(${element.changed ? iconSubIn : iconBench})`,
246			}}
247			></span>
248			<span className={"lineup__row__item lineup__item--number cell small-1"}>
249			{element.number}
250			</span>
251			<span className={"lineup__row__item lineup__item--name cell small-9"}>
252			{element.playerName}
253			</span>
254			<span className={"lineup__row__item lineup__item--time cell small-1"}>
255			{element.minutesPlayed}'
256			</span>
257			</div>
258			)
259			}
260
261			renderLineupLine(i, element) {
262			return (
263			<div
264			className={"lineup__row lineup__row--lineup grid-x grid-margin-x"}
265			key={i}
266			>
267			<span
268			className={"lineup__row__item lineup__item--status cell small-1"}
269			style={{
270			backgroundImage: `url(${element.changed ? iconSubOut : iconStart})`,
271			}}
272			></span>
273			<span className={"lineup__row__item lineup__item--number cell small-1"}>
274			{element.number}
275			</span>
276			<span className={"lineup__row__item lineup__item--name cell small-9"}>
277			{element.playerName} {element.captain && `(C)`}
278			</span>
279			<span className={"lineup__row__item lineup__item--time cell small-1"}>
280			{element.minutesPlayed}'
281			</span>
282			</div>
283			)
284			}
285			}
286
287			export const pageQuery = graphql`
288			query {
289			site {
290			siteMetadata {
291			siteUrl
292			kcvvPsdApi
293			refreshRate
294			}
295			}
296			}
297			`
298
299			export default GamePage
300

soniCaH / KCVV-Elewijt-Gatsby

Push — feature/game-reports ( 812aeb...4b0bd0 )

GamePage.render D

Complexity

Size

Duplication

Importance

How to fix Long Method Complexity

Long Method

Complexity

Duplication Side-by-Side

Filter issues like